<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>修改个人信息 - 智面未来</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            accent: '#FF9F43',
            danger: '#F87272',
            dark: '#1E293B',
            light: '#F8FAFC'
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .form-focus {
        @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
      }
      .form-error {
        @apply border-danger focus:border-danger focus:ring-2 focus:ring-danger/20;
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      .nav-scrolled {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark antialiased min-h-screen">
  <!-- 导航栏 -->
  <nav id="main-nav" class="fixed w-full top-0 z-50 transition-all duration-300 py-4">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
      <div class="flex justify-between items-center">
        <a href="#" class="flex items-center space-x-2">
          <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
            <i class="fa fa-comments text-white text-xl"></i>
          </div>
          <span class="text-xl font-bold text-primary">智面未来</span>
        </a>

        <!-- 桌面导航 -->
        <div class="hidden md:flex items-center space-x-6">
          <!-- 系统说明 -->
          <div class="relative group mr-6">
            <a href="#" class="text-dark hover:text-primary transition-colors font-medium flex items-center">
              系统说明 <i class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180"></i>
            </a>
            <div class="absolute left-0 mt-2 w-48 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
              <a href="#business" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">业务场景</a>
              <a href="#features" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">功能需求</a>
              <a href="#technology" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">技术架构</a>
            </div>
          </div>

          <!-- 模拟面试 -->
          <a href="/mnms/" class="text-dark hover:text-primary transition-colors font-medium">模拟面试</a>

          <!-- 个人主页 -->
          <div class="relative group">
            <a href="#" class="text-dark hover:text-primary transition-colors font-medium flex items-center">
              张三的个人主页 <i class="fa fa-chevron-down ml-1 text-xs transition-transform group-hover:rotate-180"></i>
            </a>
            <div class="absolute right-0 mt-2 w-60 bg-white rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50 border border-gray-100">
              <a href="/info/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">个人信息</a>
              <a href="/changeinfo/" class="block px-4 py-2 text-dark bg-primary/5 text-primary font-medium">修改个人信息</a>
              <a href="#interview-record" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">面试记录</a>
              <a href="#exam-record" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">笔试记录</a>
              <div class="border-t border-gray-100 my-1"></div>
              <a href="#about" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors">关于我们</a>
              <a href="/login/" class="block px-4 py-2 text-dark hover:bg-primary/5 hover:text-primary transition-colors text-red-600">注销</a>
            </div>
          </div>

        </div>

        <!-- 移动端菜单按钮 -->
        <button id="menu-btn" class="md:hidden text-dark focus:outline-none">
          <i class="fa fa-bars text-2xl"></i>
        </button>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white absolute w-full border-t border-gray-100">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="/mnms/" class="block text-dark hover:text-primary transition-colors py-2 font-medium">模拟面试</a>

        <!-- 系统说明下拉菜单 -->
        <div class="mobile-dropdown">
          <button class="w-full text-left flex justify-between items-center text-dark hover:text-primary transition-colors py-2 font-medium">
            系统说明 <i class="fa fa-chevron-down text-xs transition-transform"></i>
          </button>
          <div class="mobile-dropdown-content hidden pl-4 pt-2 pb-3 space-y-2">
            <a href="#business" class="block text-dark hover:text-primary transition-colors py-1">业务场景</a>
            <a href="#features" class="block text-dark hover:text-primary transition-colors py-1">功能需求</a>
            <a href="#technology" class="block text-dark hover:text-primary transition-colors py-1">技术架构</a>
          </div>
        </div>

        <!-- 个人主页下拉菜单 -->
        <div class="mobile-dropdown">
          <button class="w-full text-left flex justify-between items-center text-dark hover:text-primary transition-colors py-2 font-medium">
            个人主页 <i class="fa fa-chevron-down text-xs transition-transform"></i>
          </button>
          <div class="mobile-dropdown-content hidden pl-4 pt-2 pb-3 space-y-2">
            <a href="/info/" class="block text-dark hover:text-primary transition-colors py-1">个人信息</a>
            <a href="/changeinfo/" class="block text-primary py-1 font-medium">修改个人信息</a>
            <a href="#interview-record" class="block text-dark hover:text-primary transition-colors py-1">面试记录</a>
            <a href="#exam-record" class="block text-dark hover:text-primary transition-colors py-1">笔试记录</a>
            <div class="border-t border-gray-100 my-1 w-2/3"></div>
            <a href="#about" class="block text-dark hover:text-primary transition-colors py-1">关于我们</a>
            <a href="#logout" class="block text-dark hover:text-primary transition-colors py-1 text-red-600">注销</a>
          </div>
        </div>

        <a href="#contact" class="block bg-primary text-white px-5 py-2 rounded-full text-center hover:bg-primary/90 transition-colors font-medium">了解更多</a>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="pt-28 pb-20">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
      <!-- 页面标题 -->
      <div class="text-center max-w-3xl mx-auto mb-12">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-4">修改个人信息</h1>
        <p class="text-gray-600">更新您的账户信息，确保账户安全与准确</p>
      </div>

      <!-- 表单卡片 -->
      <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden card-hover">
          <div class="p-6 md:p-8 lg:p-10">
            <!-- 信息提示 -->
            <div class="bg-primary/5 border border-primary/20 rounded-lg p-4 mb-8">
              <div class="flex items-start">
                <div class="flex-shrink-0">
                  <i class="fa fa-info-circle text-primary text-xl mt-0.5"></i>
                </div>
                <div class="ml-4">
                  <h3 class="text-sm font-medium text-primary">账户安全提示</h3>
                  <div class="mt-1 text-sm text-gray-600">
                    <p>请确保您的密码包含大小写字母、数字和特殊符号，长度至少8位，以保障账户安全。</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 表单 -->
            <form id="profile-form" method="post" action="/info/">
                {% csrf_token %}
              <!-- 用户名修改 -->
              <div class="mb-8">
                <h3 class="text-lg font-semibold mb-6 pb-2 border-b border-gray-100">修改用户名</h3>

                <div class="mb-6">
                  <label for="current-username" class="block text-sm font-medium text-gray-700 mb-1">当前用户名</label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-user text-gray-400"></i>
                    </div>
                    <input  type="text" id="current-username" value="{{ name }}" disabled
                      class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg bg-gray-50 text-gray-500 form-focus" />
                  </div>
                </div>


                <div>
                  <label for="new-username" class="block text-sm font-medium text-gray-700 mb-1">新用户名 <span class="text-danger">*</span></label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-user-plus text-gray-400"></i>
                    </div>
                    <input name="newname" type="text" id="new-username" placeholder="请输入新用户名"
                      class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-lg form-focus" />
                  </div>
                  <p id="username-error" class="mt-1 text-sm text-danger hidden">
                    <i class="fa fa-exclamation-circle mr-1"></i> 用户名不能为空
                  </p>
                </div>
              </div>

              <!-- 密码修改 -->
              <div>
                <h3 class="text-lg font-semibold mb-6 pb-2 border-b border-gray-100">修改密码</h3>

                <div class="mb-6">
                  <label for="new-password" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-key text-gray-400"></i>
                    </div>
                    <input name="newpassword" type="password" id="new-password" placeholder="请输入新密码（留空则不修改）"
                      class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg form-focus" />
                    <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 toggle-password" data-target="new-password">
                      <i class="fa fa-eye-slash"></i>
                    </button>
                  </div>
                </div>

                <div>
                  <label for="confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                  <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <i class="fa fa-check-circle text-gray-400"></i>
                    </div>
                    <input type="password" id="confirm-password" placeholder="请再次输入新密码"
                      class="block w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg form-focus" />
                    <button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 toggle-password" data-target="confirm-password">
                      <i class="fa fa-eye-slash"></i>
                    </button>
                  </div>
                  <p id="confirm-error" class="mt-1 text-sm text-danger hidden">
                    <i class="fa fa-exclamation-circle mr-1"></i> 两次输入的密码不一致
                  </p>
                </div>
              </div>

              <!-- 提交按钮 -->
              <div class="mt-10 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                <button type="submit" class="w-full sm:w-auto bg-primary text-white px-8 py-3 rounded-lg hover:bg-primary/90 transition-all shadow-lg hover:shadow-primary/20 font-medium flex-1 flex justify-center items-center">
                  <i class="fa fa-save mr-2"></i> 保存修改
                </button>
                <button type="button" id="cancel-btn" class="w-full sm:w-auto bg-white text-gray-700 border border-gray-300 px-8 py-3 rounded-lg hover:bg-gray-50 transition-all font-medium flex-1 flex justify-center items-center">
                  <i class="fa fa-times mr-2"></i> 取消
                </button>
              </div>
            </form>
          </div>
        </div>

        <!-- 帮助提示 -->
        <div class="mt-6 text-center text-sm text-gray-500">
          <p>修改信息遇到问题？请联系 <a href="#" class="text-primary hover:underline">客服支持</a></p>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-10">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="flex items-center space-x-2 mb-6 md:mb-0">
          <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
            <i class="fa fa-comments text-white text-xl"></i>
          </div>
          <span class="text-xl font-bold text-primary">智面未来</span>
        </div>

        <div class="text-center md:text-right text-gray-500 text-sm">
          <p>© 2023 智面未来 版权所有</p>
          <p class="mt-1">面向高校学生的多模态智能模拟面试评测系统</p>
        </div>
      </div>
    </div>
  </footer>

  <!-- 成功提示模态框 -->
  <div id="success-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
      <div class="fixed inset-0 transition-opacity" aria-hidden="true">
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
      </div>

      <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

      <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
          <div class="sm:flex sm:items-start">
            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10">
              <i class="fa fa-check text-green-600"></i>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
              <h3 class="text-lg leading-6 font-medium text-gray-900">修改成功</h3>
              <div class="mt-2">
                <p class="text-sm text-gray-500">
                  您的个人信息已成功更新
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
          <button type="button" id="close-modal" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- JavaScript -->
  <script>
    // 导航栏滚动效果
    const nav = document.getElementById('main-nav');

    window.addEventListener('scroll', function() {
      if (window.scrollY > 50) {
        nav.classList.add('nav-scrolled');
      } else {
        nav.classList.remove('nav-scrolled');
      }
    });

    // 移动端菜单
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');

    menuBtn.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });

    // 移动端下拉菜单
    document.querySelectorAll('.mobile-dropdown button').forEach(button => {
      button.addEventListener('click', function() {
        const content = this.nextElementSibling;
        const icon = this.querySelector('i');

        content.classList.toggle('hidden');
        icon.classList.toggle('rotate-180');
      });
    });

    // 密码显示/隐藏切换
    document.querySelectorAll('.toggle-password').forEach(button => {
      button.addEventListener('click', function() {
        const targetId = this.getAttribute('data-target');
        const targetInput = document.getElementById(targetId);
        const icon = this.querySelector('i');

        if (targetInput.type === 'password') {
          targetInput.type = 'text';
          icon.classList.remove('fa-eye-slash');
          icon.classList.add('fa-eye');
        } else {
          targetInput.type = 'password';
          icon.classList.remove('fa-eye');
          icon.classList.add('fa-eye-slash');
        }
      });
    });

    // 表单验证函数
    function validateForm() {
      let isValid = true;
      const username = document.getElementById('new-username').value.trim();
      const password = document.getElementById('new-password').value.trim();
      const confirmPassword = document.getElementById('confirm-password').value.trim();

      // 重置所有错误提示和样式
      document.getElementById('new-username').classList.remove('form-error');
      document.getElementById('username-error').classList.add('hidden');

      document.getElementById('new-password').classList.remove('form-error');
      document.getElementById('confirm-password').classList.remove('form-error');
      document.getElementById('confirm-error').classList.add('hidden');

      // 优化：允许只修改用户名或密码其中一项
      if (username === '' && password === '') {
        alert('请至少修改用户名或密码中的一项');
        isValid = false;
        return isValid;
      }

      // 验证用户名（如果填写了）
      if (username !== '') {
        if (username === '') {
          document.getElementById('new-username').classList.add('form-error');
          document.getElementById('username-error').classList.remove('hidden');
          isValid = false;
        }
      }

      // 验证密码（如果填写了）
      if (password !== '') {
        // 验证确认密码
        if (confirmPassword !== password) {
          document.getElementById('confirm-password').classList.add('form-error');
          document.getElementById('confirm-error').classList.remove('hidden');
          isValid = false;
        }
      }

      return isValid;
    }

    // 实时验证 - 输入框失去焦点时验证
    document.getElementById('new-username').addEventListener('blur', function() {
      if (this.value.trim() === '') {
        this.classList.add('form-error');
        document.getElementById('username-error').classList.remove('hidden');
      } else {
        this.classList.remove('form-error');
        document.getElementById('username-error').classList.add('hidden');
      }
    });

    document.getElementById('new-password').addEventListener('blur', function() {
      // 密码变化时重新验证确认密码
      checkPasswordMatch();
    });

    document.getElementById('confirm-password').addEventListener('blur', checkPasswordMatch);
    document.getElementById('confirm-password').addEventListener('input', checkPasswordMatch);

    // 检查密码一致性
    function checkPasswordMatch() {
      const password = document.getElementById('new-password').value.trim();
      const confirmPassword = document.getElementById('confirm-password').value.trim();

      // 如果密码为空，不显示错误
      if (password === '') {
        document.getElementById('confirm-password').classList.remove('form-error');
        document.getElementById('confirm-error').classList.add('hidden');
        return;
      }

      if (confirmPassword !== password) {
        document.getElementById('confirm-password').classList.add('form-error');
        document.getElementById('confirm-error').classList.remove('hidden');
      } else {
        document.getElementById('confirm-password').classList.remove('form-error');
        document.getElementById('confirm-error').classList.add('hidden');
      }
    }

    // 表单提交处理
    document.getElementById('profile-form').addEventListener('submit', function(e) {
      // 先验证表单
      if (!validateForm()) {
        e.preventDefault(); // 验证失败时，阻止提交
        return;
      }

      // 验证通过后，显示模态框，并在用户确认后提交
      e.preventDefault();
      const form = this;
      const modal = document.getElementById('success-modal');
      modal.classList.remove('hidden');

      // 点击确认后提交表单
      const closeModalBtn = document.getElementById('close-modal');

      // 移除之前可能添加的事件监听器，避免重复绑定
      const newCloseModal = function() {
        modal.classList.add('hidden');
        form.submit(); // 提交表单
        closeModalBtn.removeEventListener('click', newCloseModal);
      };

      closeModalBtn.addEventListener('click', newCloseModal);
    });

    // 取消按钮 - 重置表单
    document.getElementById('cancel-btn').addEventListener('click', function() {
      // 重置所有输入框
      document.getElementById('new-username').value = '';
      document.getElementById('new-password').value = '';
      document.getElementById('confirm-password').value = '';

      // 重置所有错误提示和样式
      document.getElementById('new-username').classList.remove('form-error');
      document.getElementById('username-error').classList.add('hidden');

      document.getElementById('new-password').classList.remove('form-error');
      document.getElementById('confirm-password').classList.remove('form-error');
      document.getElementById('confirm-error').classList.add('hidden');
    });

    // 关闭模态框（仅隐藏，不重置表单）
    document.getElementById('close-modal').addEventListener('click', function() {
      document.getElementById('success-modal').classList.add('hidden');
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();

        const targetId = this.getAttribute('href');
        if (targetId === '#') return;

        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });

          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
          }
        }
      });
    });
  </script>
</body>
</html>
